<template>

  <view class="index home-bg" :style="[navBackground]">
    <!-- #ifdef H5 -->
    <download-nav v-if="isShowDownload"></download-nav>
    <!-- #endif -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
      <u-navbar
          :border-bottom="false"
          :is-fixed="false"
          custom-class="home-bg"
          :background="navBackground"
          :is-back="false"
      >
        <view class="row logo-wrap flex1" v-show="navBg < 1 && showLogo">
          <!--                    <image :src="logo" mode="heightFix" class="logo ml30"></image>-->
          <text class="logo-text ml30">{{ appConfig.name }}</text>
        </view>
        <view class="flex1 row" v-show="navSearch">
          <!--                    <navigator-->
          <!--                        hover-class="none"-->
          <!--                        @click="goPage('/bundle/pages/message_center/message_center')"-->
          <!--                    >-->
          <!--                        <image class="icon-md ml30" src="/static/images/icon_news.png"> </image>-->
          <!--                    </navigator>-->
          <navigator
              class="ml20 flex1 mr20"
              hover-class="none"
              url="/pages/goods_search/goods_search"
          >
            <u-search
                wrap-bg-color="transparent"
                :bg-color="'#fff'"
                :height="68"
                :show-action="true"
                :action-text="'搜索'"
                :action-style="{
      color: '#ffffff',
      fontSize: '28rpx',
    }"
            >
            </u-search>
          </navigator>
        </view>
      </u-navbar>
    </u-sticky>
    <view class="flex1 row" v-if="showLogo">
      <!--            <navigator-->
      <!--                hover-class="none"-->
      <!--                @tap="goPage('/bundle/pages/message_center/message_center')"-->
      <!--            >-->
      <!--                <image class="icon-md ml30" src="/static/images/icon_news.png"> </image>-->
      <!--            </navigator>-->
      <navigator
          class="ml20 flex1 mr20"
          hover-class="none"
          url="/pages/goods_search/goods_search"
      >
        <u-search
            wrap-bg-color="transparent"
            :bg-color="'rgba(255, 255, 255, 0.5)'"
            :placeholder="'查询'"
            :action-text="'搜索'"
            :input-style="{
                backgroundColor: 'transparent'
            }"
            :show-action="true"
            :height="62"
            :action-style="{
        color: '#333',
         fontSize: '28rpx'
    }"
            :disabled="false"
        ></u-search>
      </navigator>
    </view>
    <view class="contain">
      <view class="main">
        <bubble-tips top="50rpx" :discharge="isDischarge"></bubble-tips>
        <swipers :pid="1" height="322rpx" padding="20rpx 0"></swipers>
        <!-- 导航入口 -->
        <view class="nav bg-white" v-if="navList.length">
          <swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
            <swiper-item v-for="(items, index) in navList" :key="index">
              <view class="nav-list row wrap">
                <view
                    v-for="(item, index2) in items"
                    :key="index2"
                    @tap="tapMenu(item)"
                    class="nav-item column-center"
                >
                  <image class="nav-icon" :src="item.image"></image>
                  <view class="name xs">{{ item.name }}</view>
                </view>
              </view>
            </swiper-item>
          </swiper>
          <view class="dots" v-if="navList.length > 1">
            <view
                v-for="(item, index) in navList"
                :key="index"
                :class="'dot ' + (index == currentSwiper ? 'active' : '')"
            ></view>
          </view>
        </view>

        <!-- 资讯 -->
        <navigator
            v-if="news.length"
            class="information bg-white row mt20"
            hover-class="none"
            open-type="navigate"
            url="/pages/news_list/news_list?id=1"
        >
          <image class="icon-toutiao" src="/static/images/icon_gonggao.png"></image>
          <text class="gap-line">郑重承诺：</text>
<!--          <view class="shade">郑重承诺:</view>-->
          <view class="news flex1">
            <swiper
                autoplay="true"
                style="height: 76rpx; flex: 1"
                vertical="true"
                circular="true"
                :interval="3000"
            >
              <swiper-item v-for="(item, index) in news" :key="index" class="row">
<!--                <view class="flexnone">-->
<!--                  <u-tag-->
<!--                      v-if="item.is_new"-->
<!--                      shape="circle"-->
<!--                      text="最新"-->
<!--                      size="mini"-->
<!--                      type="primary"-->
<!--                      mode="plain"-->
<!--                  />-->
<!--                </view>-->
                <view class="text-swiper ml10 line1">{{ item.title }}</view>
              </swiper-item>
            </swiper>
          </view>

        </navigator>
        <!-- 热门推荐 -->
        <view class="hot mt20" v-if="newGoods.length && seting.news">
          <active-area type="hot" progressBarColor="#9912FE" :lists="newGoods">
            <navigator
                slot="header"
                hover-class="none"
                class="row activity-header"
                open-type="switchTab"
                url="/pages/sort/sort"
            >
              <view class="title flex1">
                <image
                    class="title-image"
                    src="/static/images/hot_tuijian.png"
                ></image>
              </view>
            </navigator>
          </active-area>
        </view>
        <!-- 精选推荐 -->
        <view v-if="hotGoods.length && seting.hots" class="new-goods">
          <active-area type="new" progressBarColor="#9912FE" :lists="hotGoods">
            <navigator
                slot="header"
                hover-class="none"
                class="row activity-header"
                open-type="switchTab"
                url="/pages/sort/sort"
            >
              <view class="title flex1">
                <image
                    class="title-image"
                    src="/static/images/jingxuan_tuijian.png"
                ></image>
              </view>
              	<view class="row xs more">
  更多
  <u-icon name="arrow-right" size="28"></u-icon>
</view>
            </navigator>
          </active-area>
        </view>
        <view  class="new-article">
          <active-area type="news" progressBarColor="#9912FE" :lists="newsList">
            <navigator
                slot="header"
                hover-class="none"
                class="row activity-header"
                open-type="navigate"
                url="/pages/news_list/news_list"
            >
              <view class="title flex1">
                <image
                    class="title-image"
                    src="/static/images/gonggao.png"
                ></image>
              </view>
              <view class="row xs more">
                更多
                <u-icon name="arrow-right" size="28"></u-icon>
              </view>
            </navigator>
          </active-area>
        </view>
      </view>
    </view>
    <!-- #ifdef APP-PLUS -->
    <lyg-popup
        v-if="appConfig.app_agreement"
        title="用户使用及隐私保护政策提示"
        protocolPath="/bundle/pages/server_explan/server_explan?type=0"
        policyPath="/bundle/pages/server_explan/server_explan?type=1"
        policyStorageKey="has_read_privacy"
    >
    </lyg-popup>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- 用户隐私协议弹框 -->
    <privacy-popup v-model="showPrivacyPopup"></privacy-popup>
    <!-- #endif -->

    <!-- 无网络提示 -->
    <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>

    <u-back-top
        :scroll-top="scrollTop"
        :top="1000"
        :customStyle="{
                backgroundColor: '#FFF',
                color: '#000',
                boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'
            }"
    ></u-back-top>
  </view>
</template>

<script>
import {mapMutations, mapGetters, mapActions} from 'vuex'
import {getHome, getMenu, getBestList} from '@/api/store'
import {loadingType} from '@/utils/type'
import {loadingFun, menuJump, arraySlice, setTabbar, getRect, trottle} from '@/utils/tools'
import {toLogin} from '@/utils/login'
import Cache from '@/utils/cache'
import {getConfig, userShare, getRegisterCoupon} from '@/api/app'

const app = getApp()
export default {
  data() {
    return {
      scrollTop: 0,
      navSwiperH: 374,
      logo: '',
      navHeight: 0,
      currentSwiper: 0,
      page: 1,
      status: loadingType.LOADING,
      remainTime: '',
      navBg: 0,
      navList: [],
      news: [],
      newsList: [],
      goodsList: [],
      seckill: {},
      seckillGoods: [],
      hotGoods: [],
      newGoods: [],
      activityArea: [],
      showCoupop: false,
      couponPopList: [],
      coupon: [],
      isDischarge: true,
      enable: true,
      isShowDownload: false,
      showPrivacyPopup: false //微信用户隐私协议
    }
  },
  async onLoad(options) {
    // #ifdef MP-WEIXIN
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: (res) => {
          console.log(res, '------') // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          if (res.needAuthorization) {
            // 需要弹出隐私协议
            setTimeout(() => {
              uni.hideTabBar()
            }, 100)
            this.showPrivacyPopup = true
          } else {
            uni.showTabBar()
          }
        },
        fail: (err) => {
          uni.showTabBar()
          console.log(err)
        }
      })
    } else {
      uni.showTabBar()
    }

    // #endif

    this.headerAction = wx.createAnimation({
      delay: 0,
      duration: 100,
      timingFunction: 'ease-in-out'
    })
    this.onPageScroll = trottle(this.onPageScroll, 500, this)
    setTabbar()
    this.navHeight = app.globalData.navHeight
    this.isDischarge = false
    await this.getMenuFun()
    this.getBestListFun()
    console.log(this.appConfig)
    // #ifdef H5
    if (options && options.isapp == 1) {
      this.isShowDownload = true
    }
    // #endif
  },
  async onShow() {
    this.$nextTick(function () {
      getRect('.index').then((res) => {
        if (res.top == 0) {
          this.navBg = 0
        }
      })
    })

    // #ifdef H5
    this.enable = true
    // #endif
    await this.getHomeFun()
    this.getCartNum()
    this.isLogin && this.getRegisterCouponFun()

    // #ifdef MP
    wx.getUpdateManager().onUpdateReady(function () {
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success(res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            wx.getUpdateManager().applyUpdate()
          }
        }
      })
    })
    // #endif
  },
  onHide() {
    // #ifdef H5
    this.enable = false
    // #endif
  },
  onReachBottom() {
    this.getBestListFun()
  },
  onPullDownRefresh() {
    this.getHomeFun()
    this.getMenuFun()
  },
  onShareAppMessage() {
    console.log(this.inviteCode)
    const shareInfo = Cache.get('shareInfo')
    return {
      title: shareInfo.mnp_share_title,
      path: 'pages/index/index?invite_code=' + this.inviteCode,
      imageUrl: shareInfo.mnp_share_image
    }
  },
  onPageScroll(e) {
    const top = uni.upx2px(100)
    const {scrollTop} = e
    if (!this.enable) return
    let percent = scrollTop / top
    this.navBg = percent > 1 ? 1 : percent
    this.scrollTop = scrollTop
  },
  destroyed() {
    this.isDischarge = true
  },
  methods: {
    ...mapMutations(['SETCONFIG']),
    ...mapActions(['getCartNum', 'getUser']),
    // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
    async handleRetry() {
      console.log('网络重试刷')
      try {
        const {code, data} = await getConfig()
        if (code == 1) {
          this.SETCONFIG(data)
          setTabbar()
        }
      } catch (e) {
        uni.showTabBar()
      }
      this.getShareInfo()
      this.getUser()
    },
    async getShareInfo() {
      const {code, data} = await userShare()
      if (code == 1) {
        Cache.set('shareInfo', data)
      }
    },
    async getHomeFun() {
      const {code, data} = await getHome()
      uni.stopPullDownRefresh()
      if (code == 1) {
        const {coupon, news, new_list, seckill, host_goods, shop_logo, new_goods, activity_area} =
            data

        this.remainTime = Math.abs(seckill.end_time - Date.parse(new Date()) / 1000)
        this.logo = shop_logo
        this.news = news
        this.newsList = new_list
        this.seckillGoods = seckill.goods
        this.seckill = seckill
        this.hotGoods = host_goods
        this.coupon = coupon
        this.newGoods = new_goods
        this.activityArea = activity_area
      }
    },

    async getMenuFun() {
      const {code, data} = await getMenu({
        type: 1
      })
      uni.stopPullDownRefresh()
      if (code == 1) {
        //   截取数组
        if (data.length <= 5) {
          this.navSwiperH = 200
        } else {
          this.navSwiperH = 374
        }
        this.navList = arraySlice(data)
      }
    },
    async getBestListFun() {
      let {page, goodsList, status} = this
      const data = await loadingFun(getBestList, page, goodsList, status)
      if (!data) return
      this.page = data.page
      this.goodsList = data.dataList
      this.status = data.status
    },
    async tapMenu(item) {

      if (!this.isLogin) return toLogin()
      menuJump(item)
    },
    goPage(url) {
      if (!this.isLogin) return toLogin()
      uni.navigateTo({
        url
      })
    },
    swiperChange(e) {
      this.currentSwiper = e.detail.current
    },
    getRegisterCouponFun() {
      getRegisterCoupon().then((res) => {
        if (res.code == 1) {
          if (res.data && res.data.length) {
            this.showCoupop = true
          }
          this.couponPopList = res.data
        }
      })
    }
  },
  computed: {
    ...mapGetters(['cartNum', 'inviteCode', 'appConfig']),
    navBackground() {
      return this.seting.top_bg_image
          ? {
            'background-image': `url(${this.seting.top_bg_image})`
          }
          : {}
    },
    showLogo() {
      return this.seting.logo
    },
    navSearch() {
      if (this.showLogo === 0) return true

      return this.navBg < 1 ? false : true
    },
    seting() {
      const {index_setting} = this.appConfig
      return index_setting
    }
  }
}
</script>

<style lang="scss">
// #ifdef H5
::v-deep .home-bg {
  background: url(../../static/images/bg_hometop.png) no-repeat;
  background-size: 100% auto;
}

// #endif
.home-bg {
  background: url(../../static/images/bg_hometop.png) no-repeat;
  background-size: 100% auto;
}

.index {
  .live-play {
    position: fixed;
    z-index: 999;
    bottom: 200rpx;
    right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    border: $-solid-border;
    border-radius: 50%;
    font-size: 32rpx;
    background-color: #ffffff;

    &__icon {
      animation: scale 0.5s infinite;
    }

    @keyframes scale {
      from {
        top: 0px;
        transform: scale(1);
      }
      to {
        transform: scale(1.2);
      }
    }
  }

  background-size: 100% auto;

  .logo-wrap {
    position: absolute;
    left: 0;

    .logo {
      width: auto;
      height: 52rpx;
    }

    .logo-text {
      font-size: 40rpx;
      font-weight: bold;
      color: #000000;
    }
  }

  .header {
    .navigation-bar {
      padding-top: var(--status-bar-height);
      box-sizing: border-box;
    }
  }

  .contain {
    .main {
      position: relative;
      z-index: 9;
      margin: 0 20rpx;

      .nav {
        position: relative;
        border-radius: 14rpx;

        .nav-item {
          width: 25%;
          margin-top: 30rpx;

          .nav-icon {
            width: 90rpx;
            height: 90rpx;
            margin-bottom: 15rpx;
          }

          .name {
            color: #364067;
          }
        }

        .dots {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 20rpx;
          display: flex;

          .dot {
            width: 10rpx;
            height: 6rpx;
            border-radius: 6rpx;
            margin-right: 10rpx;
            background-color: rgba(255, 44, 60, 0.4);

            &.active {
              width: 20rpx;
              background-color: $-color-primary;
            }
          }
        }
      }

      .information {
        height: 76rpx;
        box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
        padding: 0 20rpx;
        box-sizing: border-box;
        border-radius: 14rpx;
        background: linear-gradient(to right, #d3e6fc, #ffffff);

        .news {
          position: relative;

          .shade {
            //position: absolute;
            width: 100%;
            height: 100%;
            z-index: 100;
            line-height: 38rpx;
            color: #4b4b4b;
            margin-left: 10px;
            font-weight: bold;
          }
        }

        .icon-toutiao {
          width: 98rpx;
          height: 38rpx;
        }

        .gap-line {
          height: 38rpx;
          margin-left: 10px;
          color: #4b4b4b;
          font-weight: bold;
        }
      }

      .special-area {
        .item {
          width: 300rpx;
          border-radius: 20rpx;
          display: inline-block;
          overflow: hidden;
          margin-right: 20rpx;

          .title {
            padding: 10rpx 0;
          }

          .desc {
            background-color: #fee9eb;
            padding: 6rpx 20rpx;
            border-radius: 60rpx;
            max-width: 260rpx;
          }
        }
      }

      .activity-header {
        height: 90rpx;
        padding: 0 20rpx;
      }

      .seckill {
        .dec {
          background-color: #fffbdb;
          width: 150rpx;
        }
      }

      .hot,
      .new-goods,.new-article {
        .title-image {
          width: 155rpx;
          height: 30rpx;
        }
      }
    }

    .goods {
      .goods-title {
        height: 100rpx;

        .line {
          width: 58rpx;
          height: 1px;
          background-color: #ccc;
          margin: 0 22rpx;
        }

        .icon {
          width: 38rpx;
          height: 38rpx;
        }
      }
    }
  }

  .coupon-pop-container {
    background-image: url(../../static/images/home_coupon_bg.png);
    width: 638rpx;
    height: 804rpx;
    background-size: 100% 100%;
    padding-top: 323rpx;

    .coupon-pop-lists {
      .coupon-pop-item {
        background-image: url(../../static/images/pop_bg_coupon.png);
        width: 488rpx;
        height: 150rpx;
        background-size: 100% 100%;
        margin-top: 20rpx;

        .coupon-left {
          width: 160rpx;
          height: 100%;
        }

        .coupon-right {
          padding-left: 30rpx;
          border-left: 1rpx dashed $-color-primary;
        }
      }
    }
  }

  .coupons-popup {
    .wrap {
      position: relative;
      width: 638rpx;
      height: 803rpx;
      overflow: hidden;

      .coupon-bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .item {
        position: relative;
        width: 488rpx;
        height: 150rpx;
        margin: 0 auto 20rpx;
      }

      .img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
      }

      .item-con {
        z-index: 10;
        position: relative;
        padding: 20rpx 0;
        height: 100%;
        box-sizing: border-box;

        .price {
          width: 160rpx;
          border-right: 1px dashed $-color-primary;
          height: 100%;
        }
      }
    }

    .btn {
      width: 478rpx;
      height: 84rpx;
      margin: 20rpx auto;
      box-sizing: border-box;
      border: 3px solid #f8d07c;
    }
  }
}
.u-content {
  padding-right: 0; /* 移除默认的右侧padding */
  position: relative;
}

.u-action-active {
  position: absolute;
  right: 15px; /* 根据需要调整位置 */
  z-index: 1000; /* 确保按钮在输入框之上 */
  background-color: #0066ff;
  color: #ffffff !important;
  border-radius: 32rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 100rpx !important;
}
</style>
